<script>
import axios from "axios";
import AdminAddress from "@/components/AdminAddress.vue";

export default {
  name: "user",
  components: {AdminAddress},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === undefined || value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.state.addFrom.checkPass !== '') {
          this.$refs.addForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === undefined || value === "") {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.state.addFrom.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      state: {
        types: [],
        page: 1,
        size: 5,
        name: "",
        total: 0,
        dialogFormVisible: false,
        dialogAddFormVisible: false,
        form: {},
        addFrom: {},
        formLabelWidth: '120px',
      },
      rules: {
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {max: 11, message: '最多 11 个字符', trigger: 'blur'}
        ],
        nickName: [
          {max: 30, message: '最多 30 个字符', trigger: 'blur'}
        ],
        user: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {max: 30, message: '最多 30 个字符', trigger: 'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'},
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'},
        ],
      },
    }
  },
  methods: {
    getUser() {
      this.$api.user.getUser(
          this.state.page,
          this.state.size,
          this.state.name
      ).then((res) => {
        var data = res.data;
        if (data.success) {
          this.state.types = data.content;
          this.state.total = parseInt(data.total)
        } else {
          this.$message.error('服务器返回失败');
        }
      }).catch((resp) => {
        this.$message.error('服务器访问失败' + resp);
      })
    },
    handleEdit(index, row) {
      this.state.form = JSON.parse(JSON.stringify(row))
      this.state.dialogFormVisible = true
    },
    handleCurrentChange(val) {
      this.getTypes();
    },
    align() {
      return "text-align:center"
    },
    //新增
    submitAddBook(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.user.register(this.state.addFrom).then((res) => {
            var data = res.data;
            if (data.success) {
              this.$message.success('新增成功');
              this.state.dialogAddFormVisible = false
              this.getTypes()
            } else {
              this.$message.error(res.data.message);
            }
          }).catch((resp) => {
            this.$message.error('服务器访问失败' + resp);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //修改
    submitEditBook(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.user.updateUser(this.state.form).then((res) => {
            var data = res.data;
            if (data.success) {
              this.$message.success('修改成功');
              this.state.dialogFormVisible = false
              this.getTypes()
            } else {
              this.$message.error(res.data.message);
            }
          }).catch((resp) => {
            this.$message.error('服务器访问失败' + resp);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //取消
    cancelEdit(formName) {
      this.state.dialogFormVisible = false
      this.state.dialogAddFormVisible = false
      console.log(this.state.addFrom)
      this.$refs[formName].resetFields();
    },
    changeVal(val){
      if (val){
        this.getUser()
      }
    }
  },
  mounted() {
    this.getUser()
  }
}
</script>

<template>
  <div>
    <el-button type="primary" size="small" @click="state.dialogAddFormVisible=true">新增用户
    </el-button>
    <el-table
        :data="state.types"
        border
        :cell-style="align"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <admin-address :props="props.row.addresses" @changeVal="changeVal"></admin-address>
        </template>
      </el-table-column>
      <el-table-column
          prop="id"
          align="center"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="user"
          align="center"
          label="账号">
      </el-table-column>
      <el-table-column
          prop="phone"
          align="center"
          label="手机号">
      </el-table-column>.
      <el-table-column
          prop="userEmail"
          align="center"
          width="200"
          label="邮箱">
      </el-table-column>
      <el-table-column
          prop="nickName"
          align="center"
          label="昵称">
      </el-table-column>
      <el-table-column
          prop="sex"
          align="center"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="createTime"
          align="center"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="total"
          align="center"
          label="消费金额">
      </el-table-column>
      <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 99%;display: flex">
      <div style="margin: 10px auto;">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="state.page"
            :page-size="state.size"
            layout="total, prev, pager, next"
            :total="state.total">
        </el-pagination>
      </div>
    </div>

    <!-- 新增 -->
    <el-dialog title="新增用户" width="500px" :visible.sync="state.dialogAddFormVisible">
      <el-form :model="state.addFrom" :rules="rules" ref="addForm" :label-width="state.formLabelWidth">
        <el-form-item label="账号" prop="user">
          <el-input style="width: 218px;" v-model="state.addFrom.user" placeholder="请输入账号" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input style="width: 218px;" v-model="state.addFrom.phone" placeholder="请输入手机号" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" style="width: 218px;" v-model="state.addFrom.password" placeholder="请输入密码"
                    autocomplete="off"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" style="width: 218px;" v-model="state.addFrom.checkPass" placeholder="请确认密码"
                    autocomplete="off"/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input style="width: 218px;" v-model="state.addFrom.nickName" placeholder="昵称" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="state.addFrom.sex" placeholder="请选择">
            <el-option value="男" key="男"/>
            <el-option value="女" key="女"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit('addForm')">取 消</el-button>
        <el-button type="primary" @click="submitAddBook('addForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog title="编辑用户" width="500px" :visible.sync="state.dialogFormVisible">
      <el-form :model="state.form" :rules="rules" ref="editForm" :label-width="state.formLabelWidth">
        <el-form-item label="编号">
          <el-input readonly style="width: 218px;" v-model="state.form.id" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="账号">
          <el-input readonly style="width: 218px;" v-model="state.form.user" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input style="width: 218px;" v-model="state.form.phone" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input style="width: 218px;" v-model="state.form.nickName" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="state.form.sex" placeholder="请选择">
            <el-option value="男" key="男"/>
            <el-option value="女" key="女"/>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input readonly style="width: 218px;" v-model="state.form.userEmail" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input readonly style="width: 218px;" v-model="state.form.createTime" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="消费金额">
          <el-input readonly style="width: 218px;" v-model="state.form.total" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit('editForm')">取 消</el-button>
        <el-button type="primary" @click="submitEditBook('editForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<style scoped>

</style>